import React from 'react';
import {
  Button,
  Form,
  Input,
  message,
  Radio,
  Upload,
  Tooltip,
  Icon,
  Switch,
  Spin,
  Menu,
  Modal,
} from 'antd';
import styles from '@/pages/Account/accessSettings/siteAccess.css';
import { ChromePicker } from 'react-color';
import winSizeBig from '@/assets/accessSettings/默认大窗口.png';
import winSizeSmall from '@/assets/accessSettings/默认小窗口.png';
import Editor from '@/utils/Editor';
import {
  getSiteTagList,
  postSiteTagAdd,
  postsiteTagEdit,
  postSiteTagDel,
  postSiteTagMove,
  getSiteTagQuestionList,
  postSiteTagQuestionAdd,
  postSiteTagQuestionEdit,
  postSiteTagQuestionDel,
  postSiteTagQuestionMove,
  getSiteTagQuestionInfo,
} from '@/services/geographic';
import LeftStyles from './index.less';
import qiyeWx from '@/assets/setup.png';
import weixin from '@/assets/wx.svg';

class LeftAccess extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayColorPicker: false,
      webWinColor: '#169bd5',
      winLogo: '',
      headPath: '',
      userHeadImg: '',
      rightMessage: '',
      leftTagTree: [],
      siteTagVisible: false,
      siteTagQuestionVisible: false,
      tagId: '',
      tagName: '',
      selected: [],
      questionList: [],
      problemsLink: 1,
      questionName: '',
      linkName: '',
      linkHrefName: '',
      questionId: '',
      questionMove: {
        id: '',
      },
      questionIndex: '',
      voiceSetUp: false,
      voiceType: {
        wxAppId: null,
        wxAppKey: null,
        qyWxAppId: null,
        qyWxAppKey: null,
      },
    };
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  initData = data => {
    let { voiceType } = this.state;
    let obj = {
      winTitle: data.winTitle,
      solveFlag: data.solveFlag,
      showFlag: data.showFlag,
      isSimilar: data.isSimilar,
      winSize: data.winSize,
      voiceEnable: data.voiceEnable,
      sideShow: data.sideShow,
    };
    data.voiceList.map(item => {
      if (item.voiceType == 0) {
        obj.wxAppId = item.appId;
        obj.wxAppKey = item.appKey;
        voiceType.wxAppId = item.appId;
        voiceType.wxAppKey = item.appKey;
      }
      if (item.voiceType == 1) {
        obj.qyWxAppId = item.appId;
        obj.qyWxAppKey = item.appKey;
        voiceType.qyWxAppId = item.appId;
        voiceType.qyWxAppKey = item.appKey;
      }
    });
    this.setState(
      {
        webWinColor: data.webWinColor,
        winLogo: data.winLogo,
        headPath: data.headPath,
        userHeadImg: data.userHeadImg,
        rightMessage: data.rightMessage,
        voiceSetUp: data.voiceList.length > 0 ? true : false,
        voiceType,
      },
      () => {
        this.props.form.setFieldsValue(obj);
        this.getSiteTag();
      }
    );
  };

  /**
   * 语音输入
   */
  getAppId = (e, type) => {
    let { voiceType } = this.state;
    switch (type) {
      case 'wxAppId':
        voiceType.wxAppId = e.target.value;
        break;
      case 'wxAppKey':
        voiceType.wxAppKey = e.target.value;
        break;
      case 'qyWxAppId':
        voiceType.qyWxAppId = e.target.value;
        break;
      case 'qyWxAppKey':
        voiceType.qyWxAppKey = e.target.value;
        break;
    }
    this.setState({ voiceType });
  };

  /**
   * 侧边栏-标签列表
   */
  getSiteTag = async () => {
    const { robotId } = this.props;
    const { selected } = this.state;
    let id = selected.length > 0 ? selected[0].split('-')[0] : null;
    let res = await getSiteTagList({ robotId });
    // console.log(res);
    if (res) {
      let tagIds = res.map(e => e.id);
      this.setState(
        {
          leftTagTree: res,
          selected: id ? [id + '-' + tagIds.indexOf(id)] : res.length > 0 ? [res[0].id + '-0'] : [],
          tagId: id ? id : res.length > 0 ? res[0].id : null,
        },
        () => this.getQuestionList()
      );
    }
  };

  addSiteTag = () => {
    this.setState({ siteTagVisible: true, tagId: null });
  };

  siteTagCancel = () => {
    this.setState({ siteTagVisible: false, tagName: '' });
  };

  addTag = e => {
    this.setState({ tagName: e.target.value });
  };

  editTag = item => {
    this.setState({ tagName: item.tagName, tagId: item.id, siteTagVisible: true });
  };

  siteTagDel = async () => {
    const { selected } = this.state;
    let res = await postSiteTagDel({ id: selected[0].split('-')[0] });
    console.log(res);
    if (res.msg == '操作成功') {
      message.info(res.msg);
      this.setState({ selected: [] }, () => this.getSiteTag());
    }
  };

  tagMove = async type => {
    const { leftTagTree, selected } = this.state;
    if (leftTagTree.length == 0) {
      message.error('暂无数据，不能移动');
      return false;
    }
    let tagIds = leftTagTree.map(e => e.id);
    let id = selected[0].split('-')[0];
    let index = tagIds.indexOf(id);
    if (index == 0 && !type) {
      message.error('已经在首位，请勿操作');
      return false;
    } else if (index == tagIds.length - 1 && type) {
      message.error('已经在末尾，请勿操作');
      return false;
    }
    let obj = { id, targetId: type ? tagIds[index + 1] : tagIds[index - 1] };
    let res = await postSiteTagMove(obj);
    console.log(res);
    if (res.msg == '操作成功') {
      message.info(res.msg);
      this.getSiteTag();
    }
  };

  menuSelect = item => {
    this.setState({ selected: [item.key], tagId: item.key.split('-')[0] }, () =>
      this.getQuestionList(true)
    );
  };

  tagSubmit = async () => {
    const { tagName, tagId } = this.state;
    const { robotId } = this.props;
    let res = { data: false, msg: '操作失败' };
    if (tagId) {
      res = await postsiteTagEdit({ id: tagId, tagName });
    } else {
      res = await postSiteTagAdd({ robotId, tagName });
    }
    console.log(res);
    if (res.msg == '操作成功') {
      message.info(res.msg);
      this.siteTagCancel();
      this.getSiteTag();
    }
  };

  // 标签-问题
  getQuestionList = async (type) => {
    const { tagId, questionMove } = this.state;
    let id = questionMove.id == '' ? null : questionMove.id;
    let res = await getSiteTagQuestionList({ tagId });
    // console.log(res);
    if (res) {
      let idLists = res.map(e => e.id);
      this.setState({
        questionList: res,
        questionIndex: type ? 1 : id ? idLists.indexOf(id) + 1 : 1,
        questionMove: { id: type ? res.length > 0 ? res[0].id : null : id ? id : res.length > 0 ? res[0].id : null },
      });
    }
  };

  addTagQuestion = () => {
    this.setState({ siteTagQuestionVisible: true, questionId: null });
  };

  editTagQuestion = async item => {
    let res = await getSiteTagQuestionInfo({ id: item.id });
    console.log(res);
    if (res) {
      if (res.contentType == 1) {
        this.setState({
          questionId: res.id,
          problemsLink: res.contentType,
          questionName: res.content,
          siteTagQuestionVisible: true,
        });
      } else if (res.contentType == 2) {
        this.setState({
          questionId: res.id,
          problemsLink: res.contentType,
          linkName: res.content,
          linkHrefName: res.linkUrl,
          siteTagQuestionVisible: true,
        });
      }
    }
  };

  delTagQuestion = async item => {
    let res = await postSiteTagQuestionDel({ id: item.id });
    console.log(res);
    if (res.msg == '操作成功') {
      message.info(res.msg);
      this.getQuestionList();
    }
  };

  questionItem = item => {
    this.setState({
      questionMove: {
        id: item.target.data.id,
      },
      questionIndex: item.target.value,
    });
  };

  questionMove = async type => {
    let { questionList, questionMove } = this.state;
    if (questionList.length == 0) {
      message.error('暂无数据，不能移动');
      return false;
    }
    let questionIds = questionList.map(e => e.id);
    let id = questionMove.id;
    let index = questionIds.indexOf(id);
    if (index == 0 && !type) {
      message.error('已经在首位，请勿操作');
      return false;
    } else if (index == questionIds.length - 1 && type) {
      message.error('已经在末尾，请勿操作');
      return false;
    }
    let obj = { id, targetId: type ? questionIds[index + 1] : questionIds[index - 1] };
    let res = await postSiteTagQuestionMove(obj);
    console.log(res);
    if (res.msg == '操作成功') {
      message.info(res.msg);
      this.getQuestionList();
    }
  };

  siteTagQuestionCancel = () => {
    this.setState({
      siteTagQuestionVisible: false,
      problemsLink: 1,
      questionName: '',
      linkName: '',
      linkHrefName: '',
    });
  };

  isQuestion = e => {
    this.setState({ problemsLink: e.target.value });
  };

  addQuestion = e => {
    this.setState({ questionName: e.target.value });
  };

  addLink = e => {
    this.setState({ linkName: e.target.value });
  };

  addLinkHref = e => {
    this.setState({ linkHrefName: e.target.value });
  };

  siteTagQuestionSubmit = async () => {
    const { problemsLink, tagId, questionName, linkName, linkHrefName, questionId } = this.state;
    let obj = null;
    if (problemsLink == 1) {
      obj = {
        tagId,
        contentType: problemsLink,
        content: questionName,
      };
    } else if (problemsLink == 2) {
      obj = {
        tagId,
        contentType: problemsLink,
        content: linkName,
        linkUrl: linkHrefName,
      };
    }
    let res = { data: false, msg: '操作失败' };
    if (questionId) {
      obj.id = questionId;
      obj.tagId = undefined;
      res = await postSiteTagQuestionEdit(obj);
    } else {
      res = await postSiteTagQuestionAdd(obj);
    }
    console.log(res);
    if (res.msg == '操作成功') {
      message.info(res.msg);
      this.siteTagQuestionCancel();
      this.getQuestionList();
    }
  };

  /**
   * 打开/关闭窗口颜色选择
   */
  handleColorPick = () => {
    let { displayColorPicker } = this.state;
    this.setState({
      displayColorPicker: !displayColorPicker,
    });
  };

  /**
   * 选择颜色
   */
  handleChangeColor = color => {
    this.setState({ webWinColor: color.hex });
  };

  /**
   * 上传图片前判断
   * @returns {*}
   */
  beforeUpload = file => {
    let b = /\.(png|jpg|gif)$/;
    let a = file.name.toLowerCase();

    const pig = b.test(a);
    const isJPG = file.type;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!pig) {
      if (!isLt2M) {
        message.error('请上传小于2M的图片');
      } else {
        message.error('请上传图片格式');
      }
    } else {
      if (!isLt2M) {
        message.error('请上传小于2M的图片');
      }
    }
    return isJPG && isLt2M && pig;
  };

  /**
   * 更换图片
   * @returns {*}
   */
  handleChangeImage = (info, type) => {
    if (info.file.status === 'done') {
      switch (type) {
        case 'winLogo':
          this.setState({
            winLogo: info.file.response.url,
          });
          break;
        case 'headPath':
          this.setState({
            headPath: info.file.response.url,
          });
          break;
        case 'userHeadImg':
          this.setState({
            userHeadImg: info.file.response.url,
          });
          break;
      }
    }
  };

  /**
   * 获取表单数据
   * @returns {*}
   */
  getFormData = () => {
    const { form } = this.props;
    let info = form.getFieldsValue();
    info.rightMessage = this.ueditor.getUeditorContent();
    return info;
  };

  /** 语音配置 **/
  voiceProfile = () => {
    let { voiceSetUp } = this.state;
    this.setState({ voiceSetUp: !voiceSetUp });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const {
      displayColorPicker,
      webWinColor,
      winLogo,
      headPath,
      userHeadImg,
      rightMessage,
      siteTagVisible,
      siteTagQuestionVisible,
      leftTagTree,
      selected,
      problemsLink,
      questionList,
      voiceSetUp,
      voiceType,
    } = this.state;
    const FormItemLayont = {
      labelCol: {
        sm: 24,
        md: 5,
      },
      wrapperCol: {
        sm: 24,
        md: 16,
      },
    };
    return (
      <div>
        <Form layout="horizontal" {...FormItemLayont}>
          <Form.Item label="窗口标题">
            {getFieldDecorator('winTitle')(<Input style={{ width: 280 }} maxLength={10} />)}
          </Form.Item>
          <Form.Item label="窗口颜色">
            <div className={styles.flexColor}>
              <div className={styles.winColorBox}>
                <div
                  style={{ background: webWinColor }}
                  className={styles.webWinColor}
                  onClick={this.handleColorPick}
                />
                <span>{webWinColor}</span>
              </div>
              {displayColorPicker ? (
                <div style={{ position: 'absolute', zIndex: '2' }}>
                  <div
                    style={{
                      position: 'fixed',
                      top: '0px',
                      right: '0px',
                      bottom: '0px',
                      left: '0px',
                    }}
                    onClick={this.handleColorPick}
                  />
                  <ChromePicker color={webWinColor} onChangeComplete={this.handleChangeColor} />
                </div>
              ) : null}
            </div>
          </Form.Item>
          <Form.Item label="窗口logo">
            <Upload
              name="file"
              listType="picture"
              className="avatar-uploader"
              showUploadList={false}
              action="/cloud/file/upload"
              beforeUpload={this.beforeUpload}
              onChange={info => this.handleChangeImage(info, 'winLogo')}
              accept=".png,.jpg"
            >
              <img src={winLogo} alt="file" className={styles.logo} />
              <Button size={'small'} className={styles.uploadButton}>
                选择文件
              </Button>
            </Upload>
            <div className={styles.logoTips}>标题栏左侧Logo图，大小不超过1MB,推荐图片尺寸50*50</div>
          </Form.Item>
          <Form.Item label="解决状态">
            {getFieldDecorator('solveFlag', {
              initialValue: 1,
            })(
              <Radio.Group>
                <Radio value={1}>开启</Radio>
                <Radio value={2}>关闭</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item label="显示状态">
            {getFieldDecorator('showFlag', {
              initialValue: 1,
            })(
              <Radio.Group>
                <Radio value={1}>直接显示</Radio>
                <Radio value={2}>点击显示</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item label="联想输入">
            {getFieldDecorator('isSimilar', {
              initialValue: true,
            })(
              <Radio.Group>
                <Radio value={true}>开启</Radio>
                <Radio value={false}>关闭</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item
            label={[
              <span>
                <span>语音输入</span>
                <Tooltip
                  placement="topLeft"
                  title="开启后，用户在手机端微信内打开咨询窗时，可以通过语音输入方式提问"
                >
                  <Icon type="question-circle" style={{ color: '#66666666', margin: '0 2px' }} />
                </Tooltip>
              </span>,
            ]}
          >
            {getFieldDecorator('voiceEnable', {
              initialValue: true,
            })(
              <Radio.Group>
                <Radio value={true}>开启</Radio>
                <Radio value={false}>关闭</Radio>
              </Radio.Group>
            )}
            <span
              className={styles.logoTips}
              onClick={this.voiceProfile}
              style={{ cursor: 'pointer' }}
            >
              <span>高级配置</span>
              <Icon type="down" style={{ fontSize: '13px', marginLeft: 2 }} />
            </span>
          </Form.Item>
          {voiceSetUp ? (
            <>
              <div style={{ marginLeft: '6vw' }}>
                <img src={weixin} width="40" />
                <span style={{ marginLeft: 5 }}>微信渠道</span>
              </div>
              <Form.Item label="AppId" style={{ marginBottom: 0 }}>
                {getFieldDecorator('wxAppId', { initialValue: voiceType.wxAppId })(
                  <Input style={{ width: '260px' }} onChange={e => this.getAppId(e, 'wxAppId')} />
                )}
              </Form.Item>
              <Form.Item label="AppKey" style={{ marginBottom: 10 }}>
                {getFieldDecorator('wxAppKey', { initialValue: voiceType.wxAppKey })(
                  <Input style={{ width: '260px' }} onChange={e => this.getAppId(e, 'wxAppKey')} />
                )}
              </Form.Item>
              <div style={{ marginLeft: '6vw' }}>
                <img src={qiyeWx} width="36" />
                <span style={{ marginLeft: 5 }}>企业微信渠道</span>
              </div>
              <Form.Item label="AppId" style={{ marginBottom: 0 }}>
                {getFieldDecorator('qyWxAppId', { initialValue: voiceType.qyWxAppId })(
                  <Input style={{ width: '260px' }} onChange={e => this.getAppId(e, 'qyWxAppId')} />
                )}
              </Form.Item>
              <Form.Item label="AppKey">
                {getFieldDecorator('qyWxAppKey', { initialValue: voiceType.qyWxAppKey })(
                  <Input
                    style={{ width: '260px' }}
                    onChange={e => this.getAppId(e, 'qyWxAppKey')}
                  />
                )}
              </Form.Item>
            </>
          ) : (
            ''
          )}

          <Form.Item label="机器人头像">
            <Upload
              name="file"
              listType="picture"
              className="avatar-uploader"
              showUploadList={false}
              action="/cloud/file/upload"
              beforeUpload={this.beforeUpload}
              onChange={info => this.handleChangeImage(info, 'headPath')}
              accept=".png,.jpg"
            >
              <img src={headPath} alt="file" className={styles.logo} />
              <Button size={'small'} className={styles.uploadButton}>
                选择文件
              </Button>
            </Upload>
            <div className={styles.logoTips}>
              机器人接待时显示的客服头像，大小不超过1MB，推荐图片尺寸50×50px
            </div>
          </Form.Item>
          <Form.Item label="客户默认头像">
            <Upload
              name="file"
              listType="picture"
              className="avatar-uploader"
              showUploadList={false}
              action="/cloud/file/upload"
              beforeUpload={this.beforeUpload}
              onChange={info => this.handleChangeImage(info, 'userHeadImg')}
              accept=".png,.jpg"
            >
              <img src={userHeadImg} alt="file" className={styles.logo} />
              <Button size={'small'} className={styles.uploadButton}>
                选择文件
              </Button>
            </Upload>
            <div className={styles.logoTips}>标题栏左侧Logo图，大小不超过1MB,推荐图片尺寸50*50</div>
          </Form.Item>
          <Form.Item label="默认窗口大小">
            <div className={styles.winSize}>
              <img src={winSizeBig} />
              <img style={{ marginLeft: 20 }} src={winSizeSmall} />
            </div>
            {getFieldDecorator('winSize', {
              initialValue: 1,
            })(
              <Radio.Group>
                <Radio style={{ marginLeft: 24, marginTop: 10 }} value={1}>
                  大窗口
                </Radio>
                <Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>
                  小窗口
                </Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item label="侧边栏显示状态">
            {getFieldDecorator('sideShow', {
              valuePropName: 'checked',
              initialValue: true,
            })(<Switch checkedChildren="启用" unCheckedChildren="禁用" />)}
            <span className={styles.logoTips} style={{ marginLeft: 10 }}>
              开启后，将在电脑端咨询窗大窗口模式下显示右侧边栏
            </span>
          </Form.Item>
          <Form.Item className="antZdy" label="侧边栏信息展示">
            <Editor
              content={rightMessage}
              name="content"
              id="content"
              width="300"
              ref={r => (this.ueditor = r)}
              zIndex={2}
            />
          </Form.Item>
          <Form.Item label="侧边栏链接&问题区">
            <div className={LeftStyles.siteTag}>
              <div style={{ width: '200px' }}>
                <Menu
                  theme="light"
                  mode="inline"
                  onClick={item => this.menuSelect(item)}
                  selectedKeys={selected}
                  style={{ height: '100%', minHeight: '275px', position: 'relative' }}
                >
                  {leftTagTree.map((treeItem, index) => {
                    return (
                      <Menu.Item
                        key={treeItem.id + '-' + index}
                        id={treeItem.id}
                        name={treeItem.tagName}
                      >
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                          <span>{treeItem.tagName}</span>
                          <div>
                            <span onClick={e => this.editTag(treeItem)}>
                              <Icon type="edit" />
                            </span>
                          </div>
                        </div>
                      </Menu.Item>
                    );
                  })}
                  <div style={{ height: '24px', lineHeight: '24px', padding: '0 8px' }}>
                    <span
                      style={{ color: 'rgb(17, 203, 255)', cursor: 'pointer' }}
                      onClick={this.addSiteTag}
                    >
                      +添加标签
                    </span>
                  </div>
                  <div className={LeftStyles.tagBottom}>
                    <Button type="link" onClick={() => this.tagMove(false)}>
                      上移
                    </Button>
                    <Button type="link" onClick={() => this.tagMove(true)}>
                      下移
                    </Button>
                    <Button type="link" onClick={this.siteTagDel}>
                      删除
                    </Button>
                  </div>
                </Menu>
              </div>
              <div className={LeftStyles.rightQuestionList}>
                <div className={LeftStyles.content}>
                  <Radio.Group
                    style={{ width: '100%' }}
                    onChange={this.questionItem}
                    value={this.state.questionIndex}
                  >
                    {questionList.map((item, index) => {
                      return (
                        <Radio
                          key={index}
                          value={index + 1}
                          style={{ display: 'block' }}
                          data={item}
                        >
                          <span style={{ marginBottom: 0, lineHeight: '48px' }}>
                            <span className={LeftStyles.questionListName}>
                              {item.contentType == 1 ? <Icon type="question-circle" /> : ''}
                              {item.contentType == 2 ? <Icon type="link" /> : ''}
                              <span className={LeftStyles.questionListText}>{item.content}</span>
                            </span>
                            <span
                              className={LeftStyles.questionList}
                              onClick={e => this.delTagQuestion(item)}
                            >
                              <Icon type="close" />
                            </span>
                            <span
                              className={LeftStyles.questionList}
                              onClick={e => this.editTagQuestion(item)}
                            >
                              <Icon type="edit" />
                            </span>
                          </span>
                        </Radio>
                      );
                    })}
                  </Radio.Group>
                  <div className={LeftStyles.tagBottomRight}>
                    <Button
                      size="small"
                      style={{ marginRight: 16 }}
                      onClick={() => this.questionMove(false)}
                    >
                      上移
                    </Button>
                    <Button
                      size="small"
                      style={{ marginRight: 16 }}
                      onClick={() => this.questionMove(true)}
                    >
                      下移
                    </Button>
                    <Button
                      size="small"
                      icon="plus"
                      style={{ marginRight: 16 }}
                      onClick={this.addTagQuestion}
                    >
                      添加
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </Form.Item>
        </Form>
        <Modal
          title="添加标签"
          onCancel={this.siteTagCancel}
          visible={siteTagVisible}
          destroyOnClose
          footer={[
            <Button onClick={this.siteTagCancel}>取消</Button>,
            <Button type="primary" onClick={this.tagSubmit}>
              确定
            </Button>,
          ]}
        >
          <Form {...FormItemLayont}>
            <Form.Item label="标签名称">
              <Input onChange={this.addTag} value={this.state.tagName} />
            </Form.Item>
          </Form>
        </Modal>
        <Modal
          title="添加问题链接"
          onCancel={this.siteTagQuestionCancel}
          visible={siteTagQuestionVisible}
          destroyOnClose
          footer={[
            <Button onClick={this.siteTagQuestionCancel}>取消</Button>,
            <Button type="primary" onClick={this.siteTagQuestionSubmit}>
              确定
            </Button>,
          ]}
        >
          <Form {...FormItemLayont}>
            <Form.Item label="添加类型">
              <Radio.Group onChange={this.isQuestion} value={problemsLink}>
                <Radio style={{ marginLeft: 24, marginTop: 10 }} value={1}>
                  <span>问题</span>
                  <Tooltip placement="topLeft" title="用户点击后将自动把问题发送给机器人或人工客服">
                    <Icon type="question-circle" style={{ color: '#66666666', margin: '0 2px' }} />
                  </Tooltip>
                </Radio>
                <Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>
                  <span>链接</span>
                  <Tooltip placement="topLeft" title="用户点击后将打开该链接页面">
                    <Icon type="question-circle" style={{ color: '#66666666', margin: '0 2px' }} />
                  </Tooltip>
                </Radio>
              </Radio.Group>
            </Form.Item>
            {problemsLink == 1 ? (
              <Form.Item label="问题">
                <Input onChange={this.addQuestion} value={this.state.questionName} />
              </Form.Item>
            ) : (
              ''
            )}
            {problemsLink == 2 ? (
              <>
                <Form.Item label="链接文字">
                  <Input onChange={this.addLink} value={this.state.linkName} />
                </Form.Item>
                <Form.Item label="链接地址">
                  <Input onChange={this.addLinkHref} value={this.state.linkHrefName} />
                </Form.Item>
              </>
            ) : (
              ''
            )}
          </Form>
        </Modal>
      </div>
    );
  }
}

export default Form.create()(LeftAccess);
